<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery.event.drop - Demos</title>
<style type="text/css" media="screen">
body {
	font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
	color: #002;
	padding: 0;
	margin: 20px;
	}
code {
	display: block;
	background: #F9F9F9;
	border: 1px dashed #ABC;
	font: 12px/16px "Courier New", Courier, monospace;
	padding: 10px;
	margin: 0 0 30px 0;
	white-space: pre;
	float: left;
	}
.str { color: #00A; }
.kwd { color: #808; }
.com { color: #777; }
.typ { color: #088; }
.lit { color: #800; }
.pun { color: #000; }
.pln { color: #002; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
p { margin: 0 0 5px 0; }
.box {
	padding: 10px 20px;
	background: #CCC;
	border: 1px solid #AAA;
	text-align: center;
	font-size: 10px;
	margin: 0 0 10px 0;
	}	

.drag {
	height: 100px;
	width: 100px;
	float: left;
	border: 1px solid #AAA;
	background: #CCC;
	margin: 10px;
	cursor: move;
	font-size: 80px;
	text-align: center;
	line-height: 100px;
	color: #AAA;
	}
	.drop .drag {
		height: 77px;
		width: 77px;
		font-size: 70px;
		line-height: 77px;
		}
.drop {
	height: 202px;
	width: 202px;
	float: left;
	border: 1px solid #AAA;
	background: #CCC;
	margin: 10px;
	padding: 10px;
	overflow: auto;	
	}	
.ghost {
	position: absolute;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	background-color: #CCF;
	border-color: #AAD;
	color: #AAD;
	}
.outline {
	background-color: #FCC;
	border-color: #DAA;
	border-style: dashed;
	color: #DAA;
	}
.active {
	background-color: #CFC;
	border-color: #ADA;
	}
#nodrop {
	height: 120px;
	}
#log {
	border: 1px solid #AAA;
	padding: 10px;
	overflow: auto;
	height: 160px;
	width: 464px;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" type="text/javascript"></script>
<script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-1.3.js" type="text/javascript"></script>
<script src="../jquery.event.drop-1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$(".drag")
		.bind( "dragstart", function( event ){
			// ref the "dragged" element, make a copy
			var $drag = $( this ), $proxy = $drag.clone();
			// modify the "dragged" source element
			$drag.addClass("outline");
			// insert and return the "proxy" element		
			return $proxy.appendTo( document.body ).addClass("ghost");
			})
		.bind( "drag", function( event ){
			// update the "proxy" element position
			$( event.dragProxy ).css({
				left: event.offsetX, 
				top: event.offsetY
				});
			})
		.bind( "dragend", function( event ){
			// remove the "proxy" element
			$( event.dragProxy ).fadeOut( "normal", function(){
				$( this ).remove();
				});
			// if there is no drop AND the target was previously dropped 
			if ( !event.dropTarget && $(this).parent().is(".drop") ){
				// output details of the action
				$('#log').append('<div>Removed <b>'+ this.title +'</b> from <b>'+ this.parentNode.title +'</b></div>');
				// put it in it's original <div>
				$('#nodrop').append( this );
				}
			// restore to a normal state
			$( this ).removeClass("outline");	
			
			});
	$('.drop')
		.bind( "dropstart", function( event ){
			// don't drop in itself
			if ( this == event.dragTarget.parentNode ) return false;
			// activate the "drop" target element
			$( this ).addClass("active");
			})
		.bind( "drop", function( event ){
			// if there was a drop, move some data...
			$( this ).append( event.dragTarget );
			// output details of the action...
			$('#log').append('<div>Dropped <b>'+ event.dragTarget.title +'</b> into <b>'+ this.title +'</b></div>');	
			})
		.bind( "dropend", function( event ){
			// deactivate the "drop" target element
			$( this ).removeClass("active");
			});
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	});
</script>
</head>

<body>
<h2>Demos / jquery.event.drop.js / <a href="http://threedubmedia.com/">threedubmedia.com</a></h2>

<div class="drop" title="Target A">
	<b>A</b>
	</div>
	
<div class="drop" title="Target B">
	<b>B</b>
	</div>
	
<br clear="all" />

<div id="nodrop">
	<div class="drag" title="Div 1">1</div>
	<div class="drag" title="Div 2">2</div>
	<div class="drag" title="Div 3">3</div>
	<div class="drag" title="Div 4">4</div>
	</div>
	
<br clear="all" />

-- output log --
<div id="log">
	
	</div>
-- sample code --
<code><span class="pln">$</span><span class="pun">(</span><span class="str">".drag"</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dragstart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// ref the "dragged" element, make a copy</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> $drag </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">),</span><span class="pln"> $proxy </span><span class="pun">=</span><span class="pln"> $drag</span><span class="pun">.</span><span class="pln">clone</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// modify the "dragged" source element</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $drag</span><span class="pun">.</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"outline"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// insert and return the "proxy" element &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> $proxy</span><span class="pun">.</span><span class="pln">appendTo</span><span class="pun">(</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body </span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"ghost"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"drag"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// update the "proxy" element position</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left</span><span class="pun">:</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">offsetX</span><span class="pun">,</span><span class="pln"> <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top</span><span class="pun">:</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">offsetY<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dragend"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// remove the "proxy" element</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragProxy </span><span class="pun">).</span><span class="pln">fadeOut</span><span class="pun">(</span><span class="pln"> </span><span class="str">"normal"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">remove</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// if there is no drop AND the target was previously dropped </span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="pun">!</span><span class="pln">event</span><span class="pun">.</span><span class="pln">dropTarget </span><span class="pun">&amp;&amp;</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">parent</span><span class="pun">().</span><span class="pln">is</span><span class="pun">(</span><span class="str">".drop"</span><span class="pun">)</span><span class="pln"> </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// output details of the action</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="str">'#log'</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="str">'&lt;div&gt;Removed &lt;b&gt;'</span><span class="pun">+</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'&lt;/b&gt; from &lt;b&gt;'</span><span class="pun">+</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'&lt;/b&gt;&lt;/div&gt;'</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// put it in it's original div...</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="str">'#nodrop'</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// restore to a normal state</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">"outline"</span><span class="pun">);</span><span class="pln"> &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br>$</span><span class="pun">(</span><span class="str">".drop"</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dropstart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// don't drop in itself</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragTarget</span><span class="pun">.</span><span class="pln">parentNode </span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// activate the "drop" target element</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"active"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"drop"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// if there was a drop, move some data...</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragTarget </span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// output details of the action...</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="str">'#log'</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="str">'&lt;div&gt;Dropped &lt;b&gt;'</span><span class="pun">+</span><span class="pln"> event</span><span class="pun">.</span><span class="pln">dragTarget</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'&lt;/b&gt; into &lt;b&gt;'</span><span class="pun">+</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">title </span><span class="pun">+</span><span class="str">'&lt;/b&gt;&lt;/div&gt;'</span><span class="pun">);</span><span class="pln"> &nbsp; &nbsp; &nbsp; &nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">})</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="pln"> </span><span class="str">"dropend"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln"> event </span><span class="pun">){</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="com">// deactivate the "drop" target element</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">this</span><span class="pln"> </span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">"active"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span></code>

</body>
</html>
